<script setup lang="ts">
  const props = defineProps({
    label: {
      type: String,
      default: '',
    },
  });
</script>

<template>
  <div class="container">
    <div class="label">{{ props.label }}</div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="less">
  .container {
    display: flex;
    box-sizing: border-box;
    flex: 1;
    align-items: center;
    width: 100%;
    height: 40px;
    border: 1px solid rgb(187 187 187);
    border-radius: 8px;

    .label {
      display: flex;
      align-items: center;
      justify-content: end;
      width: 100%;
      height: 100%;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      background-color: rgb(247 247 247);
    }

    .label::after {
      content: '：';
    }

    .content {
      width: 100%;
      text-align: center;
    }
  }
</style>
